// 首页主内容
import React from 'react'
import Banner from '../Banner'
import './index.css'
// 分类背景图
import backgroundImg1 from '../../images/im/PC-首页_03_03.gif'
import backgroundImg2 from '../../images/ima/PC-首页_03.gif'
import backgroundImg3 from '../../images/imag/PC-首页_03.gif'
import backgroundImg4 from '../../images/image/PC-首页_03.gif'
// 广告图
// import advertising1 from '../../images/PC-首页_03.gif'
// import advertising2 from '../../images/PC-首页_06.gif'

import {connect} from 'react-redux'
import {greatLifes,getFoods,getArticles,getHouse,getSpecials} from '../../store/Index.redux'

//第一张背景图
let Img1={
    background:`url(${backgroundImg1})no-repeat`,
    backgroundSize:'100% 100%'
};
//第二张背景图
let Img2={
    background:`url(${backgroundImg2})no-repeat`,
    backgroundSize:'100% 100%'
};
// 第三张背景图
let Img3={
    background:`url(${backgroundImg3})no-repeat`,
    backgroundSize:'100% 100%'
};
// 第四张背景图
let Img4={
    background:`url(${backgroundImg4})no-repeat`,
    backgroundSize:'100% 100%'
};
@connect(
    (state)=>({
        data:state.Index.data, //精彩生活数据
        foods:state.Index.foods,//生活食品表数据
        articles:state.Index.articles,//生活用品数据
        house:state.Index.house,//生活家具数据
        specials:state.Index.specials//特卖专区数据
    }),{
        greatLifes,getFoods,getArticles,getHouse,getSpecials
    }
)
class Index extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
   componentDidMount(){
       this.props.greatLifes();
       this.props.getFoods();
       this.props.getArticles();
       this.props.getHouse();
       this.props.getSpecials();
   } 
    render() {
        return (
            <div>
                <Banner></Banner>
                <div className="indexCont">
                    <div className="contHei">
                        <div className="cont_left" style={Img1}>
                            <span className="fontSize org">精彩生活</span>
                            <span className="fontColor">会员专享</span>
                        </div>
                        <div className="cont_right">
                            <ul id="greatLifes">
                                {
                                    this.props.data.map((v,i)=>(
                                        <li key={i}><img src={"http://localhost:3200/"+v.images[0]}/></li>
                                    ))
                                }    
                            </ul>
                        </div>
                    </div>
                    {/* <!--精彩生活区域--> */}
                    <div className="contHei">
                        <div className="cont_left cont_leftCenter" style={Img2}>
                            <span className="fontSize gren">生活食品</span>
                            <span className="grenn">为生活 添实惠</span>
                            <div className="cont_leftNav color1">
                                <span>传统糕点</span>
                                <span>膨化食品</span>
                                <span>膨化食品</span>
                                <span>传统糕点</span>
                                <span>膨化食品</span>
                                <span>膨化食品</span>
                                <span>传统糕点</span>
                                <span>膨化食品</span>
                                <span>膨化食品</span>
                            </div>
                        </div>
                        <div className="cont_centerRight">
                            <ul id="food1">
                                {
                                    // console.log(this.props.foods)
                                    this.props.foods.map((val,index)=>{
                                        if(index <= 3){
                                            return <li key={index}><span>{val.title}</span><span>{val.forShort}</span><img src={"http://localhost:3200/"+val.images[0]}/></li>
                                        }
                                    })
                                }
                            </ul>
                            <ul id="food2">
                            {
                                    this.props.foods.map((val,index)=>{
                                        if(index == 4){
                                            return <li key={index}><span>{val.title}</span><span>{val.forShort}</span><img src={"http://localhost:3200/"+val.images[0]}/></li>
                                        }
                                    })
                                }
                            </ul>
                            <ul id="food3">
                            {
                                    this.props.foods.map((val,index)=>{
                                        if(index > 4){
                                            return <li key={index}><span>{val.title}</span><span>{val.forShort}</span><img src={"http://localhost:3200/"+val.images[0]}/></li>
                                        }
                                    })
                                }
                            </ul>
                        </div>
                    </div>
                    {/* <!--生活用品区域--> */}
                    <div className="contHei">
                        <div className="cont_left cont_leftS" style={Img3}>
                            <span className="fontSize blu">生活用品</span>
                            <span className="blue">为生活 更舒适</span>
                            <div className="cont_leftNav color2">
                                <span>厨房用品</span>
                                <span>日常用品</span>
                                <span>创意用品</span>
                                <span>厨房用品</span>
                                <span>日常用品</span>
                                <span>创意用品</span>
                                <span>厨房用品</span>
                                <span>日常用品</span>
                                <span>创意用品</span>
                            </div>
                        </div>
                        <div className="cont_centerRight">
                            <ul id="articles1">
                            {
                                    this.props.articles.map((val,index)=>{
                                        if(index <= 3){
                                            return <li key={index}><span>{val.title}</span><span>{val.forShort}</span><img src={"http://localhost:3200/"+val.images[0]}/></li>
                                        }
                                    })
                                }
                            </ul>
                            <ul id="articles2">
                            {
                                    this.props.articles.map((val,index)=>{
                                        if(index == 4){
                                            return <li key={index}><span>{val.title}</span><span>{val.forShort}</span><img src={"http://localhost:3200/"+val.images[0]}/></li>
                                        }
                                    })
                                }
                            </ul>
                            <ul id="articles3">
                            {
                                    this.props.foods.map((val,index)=>{
                                        if(index > 4){
                                            return <li key={index}><span>{val.title}</span><span>{val.forShort}</span><img src={"http://localhost:3200/"+val.images[0]}/></li>
                                        }
                                    })
                                }
                            </ul>
                        </div>
                    </div>
                    {/* <!--生活家居区域--> */}
                    <div className="contHei">
                        <div className="cont_left cont_leftJ" style={Img4}>
                            <span className="fontSize pink">生活家具</span>
                            <span className="pinkk">为生活 享生活</span>
                            <div className="cont_leftNav color3">
                                <span>厨房用品</span>
                                <span>日常用品</span>
                                <span>创意用品</span>
                                <span>厨房用品</span>
                                <span>日常用品</span>
                                <span>创意用品</span>
                                <span>厨房用品</span>
                                <span>日常用品</span>
                                <span>创意用品</span>

                            </div>
                        </div>
                        <div className="cont_centerRight">
                            <ul id="house1">
                            {
                                    this.props.house.map((val,index)=>{
                                        if(index <= 3){
                                            return <li key={index}><span>{val.title}</span><span>{val.forShort}</span><img src={"http://localhost:3200/"+val.images[0]}/></li>
                                        }
                                    })
                                }
                            </ul>
                            <ul id="house2">
                            {
                                    this.props.house.map((val,index)=>{
                                        if(index == 4){
                                            return <li key={index}><span>{val.title}</span><span>{val.forShort}</span><img src={"http://localhost:3200/"+val.images[0]}/></li>
                                        }
                                    })
                                }
                            </ul>
                            <ul id="house3">
                            {
                                    this.props.house.map((val,index)=>{
                                        if(index > 4){
                                            return <li key={index}><span>{val.title}</span><span>{val.forShort}</span><img src={"http://localhost:3200/"+val.images[0]}/></li>
                                        }
                                    })
                                }
                            </ul>
                        </div>
                    </div>
                    {/* <!--特卖专区--> */}
                    <div className="sale">
                        <div className="saleHead">
                            <hr />
                            <h3>特卖专区 Sales</h3>
                            <hr />
                            <div className="saleCont">
                                <ul>
                                    {
                                    //    console.log( this.props.specials)
                                        this.props.specials.map((val,index)=>(
                                            <li key={index}>
                                                <img src={"http://localhost:3200/"+val.images[0]} alt=""/>
                                                <h5>{val.title}</h5>
                                            </li>
                                        ))
                                    }
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        )
    }

}
export default Index